<template>
  <div class="tip-wrap">
    <!-- 便签图标部分 -->
    <div class="tip-icon-box">
      <div
        :class="[
          'tip-container',
          showIcon ? 'open-tip-icon' : 'close-tip-icon',
        ]"
        @mouseenter="showIcon = !isOpenTip"
        @mouseleave="showIcon = isOpenTip"
      >
        <div class="tip-icon">
          <el-icon @click="handleTipIconClose" title="双击收起便签"
            ><notebook
          /></el-icon>
        </div>
        <div class="tip-icon">
          <el-icon @click="handleTipIconOpen" title="双击打开便签"
            ><folder-opened
          /></el-icon>
        </div>
      </div>
    </div>
    <!-- 便签内容 -->
    <div class="tip" :class="classLOrR" @mousedown="stopBubble">
      <el-scrollbar>
        <ul class="tip-ul">
          <tip-item
            :title="title"
            :time="time"
            :desc="desc"
            v-for="item in [1, 2, 3, 4, 5, 6, 7, 8]"
            :key="item"
          ></tip-item>
        </ul>
      </el-scrollbar>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
import TipItem from "@/components/Tip/TipItem.vue";
import doubleClick from "@/share/doubleClick";
import { stopBubble, getCss } from "@/share/helper";
export default defineComponent({
  setup() {
    // 便签显示在右边： top:24px; left: 50px;
    // 便签显示在左边: top: 24px; right: -390px;
    const tipLocation = reactive({ top: 24, left: -350 });
    const isOpenTip = ref(false);
    const showIcon = ref(false);
    const isTipRight = ref(false);
    // 在1000毫秒内连续点击两次，触发回调函数
    const handleIconState = doubleClick(function () {
      isOpenTip.value = !isOpenTip.value;
    }, 1000);
    const handleTipIconClose = doubleClick(function () {
      isOpenTip.value = false;
    }, 1000);
    const handleTipIconOpen = doubleClick(function () {
      isOpenTip.value = true;
      const containerW = parseFloat(
        getCss(document.querySelector(".primary-main-view"), "width")
      );
      const tipIconL = parseFloat(
        getCss(document.querySelector(".primary-main-view .tip-wrap"), "left")
      );
      console.log("openTip", containerW, tipIconL);
    }, 1000);
    const tip = reactive({
      title: "我是个便xssaxasxasxasxsaxcascascascascascascsacascascascsa签",
      time: "2022-01-3 16:00",
      desc: "我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容",
    });

    return {
      isOpenTip,
      showIcon,
      handleIconState,
      handleTipIconClose,
      handleTipIconOpen,
      ...toRefs(tip),
      tipLocation,
      stopBubble,
      isTipRight,
    };
  },
  components: { TipItem },
  computed: {
    classLOrR() {
      return {
        "tip-right": this.isTipRight,
        "tip-left": !this.isTipRight,
        "tip-close-left": !this.isTipRight && !this.isOpenTip,
        "tip-close-right": this.isTipRight && !this.isOpenTip,
      };
    },
  },
});
</script>
<style lang="scss" scoped>
.tip-wrap {
  z-index: 10;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 20px;
  right: 50px;
}
// 便签图标部分
.tip-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 2px 2px 2px 1px #ccc;
  overflow: hidden;
  top: 0;
  left: 0;
  position: absolute;
  cursor: grabbing;
}
.tip-container {
  width: 92px;
  position: absolute;
  top: 0;
  left: 0px;
  transition: all linear 0.5s;
}
.open-tip-icon {
  left: -46px;
  transition: all linear 0.5s;
}
.close-tip-icon {
  left: 0px;
  transition: all linear 0.5s;
}

.tip-icon {
  display: inline-block;
  line-height: 46px;
  text-align: center;
  width: 46px;
  height: 46px;
}
.el-icon {
  width: 20px;
  height: 20px;
  &:hover {
    cursor: pointer;
  }
}
// 便签内容
// 原本的状态
.tip {
  top: 24px;
  position: absolute;
  // tip内容的固定宽
  width: 340px;
  height: 600px;
  border-radius: 10px;
  box-shadow: 1px 1px 2px 1px #ccc;
  background-color: #fff;
  transition: 1s linear all;
  padding: 10px 0;
}
.tip-ul {
  padding: 0 10px;
}
.tip-right {
  left: 56px;
}
.tip-left {
  left: -350px;
}
// 使用 scale(0) 进行显示隐藏
// 便签右边的缩放
.tip-close-right {
  // translate 和 scale 关系，朝一点缩放
  // translate 顺序 x、y、z
  transform: translate(-50%, -50%) scale(0);
}
.tip-close-left {
  // translate 和 scale 关系，朝一点缩放
  // translate 顺序 x、y、z
  transform: translate(50%, -50%) scale(0);
}
</style>
